<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vuex.js"></script>
</head>

<body>
  <div id="app">
    {{msg}} <br>
    state: {{msg}} <br>
    getters: {{reMsg}} <br>
    <ul>
      <li v-for="(item, index) in tableData" :key="index">{{item.name}}</li>
    </ul>
  </div>
  <script>
    // 1.状态机的声明
    let store = new Vuex.Store({
      // 数据模型（存放静态数据）
      state: {
        msg: 'vuex msg',
        tableData: []
      },
      // 计算属性
      getters: {
        reMsg(state) {
          return state.msg.toUpperCase()
        }
      },
      // 突变
      mutations: {
        SET_TABLEDATA(state, payload) {
          state.tableData = payload
        }
      },
      // 动作
      actions: {
        findAllCategory(context) {
          let res = [
            { name: '校园新闻', description: '最新的校园信息' },
            { name: '娱乐新闻', description: '最新的娱乐信息' },
            { name: '体育新闻', description: '最新的体育信息' },
          ]
          // 提交突变
          context.commit('SET_TABLEDATA', res)
          // 分发动作
          context.dispatch('deleteById')
        },
        deleteById() {

        }
      }
    })

    // 解构辅助函数
    let { mapState, mapGetters, mapMutations, mapActions } = Vuex

    let vm = new Vue({
      el: "#app",
      data: {
        msg: 'hello vue'
      },
      computed: {
        // vuex的辅助函数 mapState mapGetters mapMutations mapActions
        ...mapState({
          vuexMsg: 'msg',
          tableData: 'tableData'
        }),
        ...mapGetters(['reMsg']),
        // data1() {
        //   return this.$store.state.msg
        // },
        // data2() {
        //   return this.$store.getters.reMsg
        // },
        // categories() {
        //   return this.$store.state.tableData
        // }
      },
      methods: {
        // 使用辅助函数来映射动作/突变
        ...mapActions(['findAllCategory']),
        ...mapMutations(['SET_TABLEDATA']),
      },
      created() {
        // 分发动作（调用异步请求函数）
        // this.$store.dispatch('findAllCategory');
        this.findAllCategory()
        // this.SET_TABLEDATA([1, 2, 3])
      },
      // 2.状态机的注册
      store
    })
  </script>
</body>

</html>